<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:p="http://primefaces.org/ui"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core">

	<ui:composition template="/meringerTemplate.xhtml">
		<ui:define name="custom">
					<style media="screen" type="text/css">
	
						#form:inplace_content input{
							width: 115px;
						}
					
					</style>
		</ui:define>
		<ui:define name="custom">
				<script type="text/javascript" src="js/meringer.js"></script>
		</ui:define>
		<ui:define name="content">
				<!--  <div class="test"> #{userBean.currentUser.roles==null} </div> -->
			<div id="popup"  style="display: none;"></div>
			<div id="window" class="close_popup" style="display: none;"> 
				<div id="window-inner">
					<h:form>
						<c:forEach items="#{profileBean.allAvatars}" var="avatars">
							
							<h:commandButton style="width: 90px; height: 90px;" update="@all" action="#{profileBean.updateImage(avatars)}" image="#{avatars}"/>			
												
						</c:forEach>
					</h:form>
				</div>
			</div>
			<div id="profile">
			    <div id="profile-left">

			    	<img class="imgg" src="#{userBean.currentUser.imgPath}" alt="You Avatar" height="128" width="128" />
			    	
			    	<div class="avatar-but"><button type="button">Change Avatar</button></div>
			    	
			    	<div class="user-attributes">
			    	<h:form id="form">
						<p:panel id="panel" header="My profile" style="margin-bottom:10px;">
							<h:messages id="msg" style="color:red;font-weight:bold;font-size:12px;"/>
							<h:panelGrid columns="2" id="matchGrid">
							<h:outputLabel for="name" value="Name" />
								<p:inplace id="inplace" editor="true">
									<p:ajax event="save" onsuccess="saveAccount.enable();"/>
									<p:inputText id="name" required="true"
										requiredMessage="Name can not be empty"
										value="#{profileBean.name}">
									</p:inputText>
								</p:inplace>
							<h:outputLabel for="age" value="Age" />
								<p:inplace editor="true">
									<p:ajax event="save" onsuccess="saveAccount.enable();" />
									<p:inputText id="age" required="true"
										requiredMessage="Age can not be empty"
										value="#{profileBean.age}" converterMessage="Age can be only integer">
										<f:convertNumber integerOnly="true" />
									</p:inputText>
								</p:inplace>
								
								<p:commandButton id="btn" value="Save"
									action="#{profileBean.saveAccount}" update="panel" widgetVar="saveAccount" oncomplete="saveAccount.disable();">
								</p:commandButton>
							</h:panelGrid>
							<br/>
							<span style="color: green;">Level:</span> <span style="color:red;">#{userBean.userLevel}</span> 
								<div style="border: 1px solid; height: 14px; width: 100px;">
									<div style="background-repeat:repeat-x; background-image: url('img/level-bar.png');  height: 14px; width: #{userBean.userXPForImg}px;">
										
									</div>
								</div>
								<span style="color: green;font-size:12px;">XP to next level: #{userBean.userXPToNextLevel}</span> <br/>
						</p:panel>
						
						<script type="text/javascript">$(document).ready(function() {saveAccount.disable();});</script>
					</h:form>
	
	                    
	
	                   
			    	</div>
			    
			    </div>
			    <div id="profile-right">
			    	<h:form>  
  
					    <p:dataTable id="dataTable" var="car" value="#{userBean.currentUser.races}">  
					        <f:facet name="header">  
					            My last races
					        </f:facet>  
					  
					        <p:column sortBy="#{race.time}" headerText="Model">  
					            <h:outputText value="#{car.model}" />  
					        </p:column>  
					  
					        <p:column sortBy="#{car.year}" headerText="Year">  
					            <h:outputText value="#{car.year}" />  
					        </p:column>  
					  
					        <p:column sortBy="#{car.manufacturer}" headerText="Manufacturer">  
					            <h:outputText value="#{car.manufacturer}" />  
					        </p:column>  
					  
					        <p:column sortBy="#{car.color}" headerText="Color">  
					            <h:outputText value="#{car.color}" />  
					        </p:column>  
					    </p:dataTable>  
					  
					</h:form>  
			    
			    
			    </div>
		    </div>
		</ui:define>
	</ui:composition>

</html>

